<!doctype html>
<html class="no-js">
<#assign title='善小姐 - 我最爱吃的' />

<head>
    <title>${title}</title>
    <#include "/res/components/meta.html" />
    <#include "/res/components/stylesheets.html" />
    <link rel="stylesheet" type="text/css" href="/res/stylesheets/signUp.css">
</head>

<body>
    <div id="app">
        <div class="back" @click="window.history.back()">
            <i class="am-icon-close"></i>
        </div>
        <div class="top">
            <img src="/res/assets/img/sign-up-icon.png" />
        </div>
        <div class="form">
            <div class="field">
                <div class="icon">
                    <i class="am-icon-user"></i>
                </div>
                <div class="input">
                    <input type="text" placeholder="请输入您的名字" v-model="name" />
                </div>
                <div class="am-cf"></div>
            </div>
            <div class="field">
                <div class="icon">
                    <i class="am-icon-mobile-phone"></i>
                </div>
                <div class="input">
                    <input type="text" placeholder="请输入您的手机号" v-model="phone" />
                </div>
                <div class="am-cf"></div>
            </div>
            <div class="field" data-am-modal="{target: '#sex-panel'}">
                <div class="icon">
                    <i class="am-icon-user"></i>
                </div>
                <div class="input">
                    <input type="text" placeholder="请选择您的性别" v-model="sex" />
                </div>
                <div class="down">
                    <i class="am-icon-chevron-down"></i>
                </div>
                <div class="am-cf"></div>
            </div>
            <div class="field" data-am-modal="{target: '#age-panel'}">
                <div class="icon">
                    <i class="am-icon-venus-mars"></i>
                </div>
                <div class="input">
                    <input type="text" placeholder="请选择年龄段" v-model="age" />
                </div>
                <div class="down">
                    <i class="am-icon-chevron-down"></i>
                </div>
                <div class="am-cf"></div>
            </div>
            <div class="field">
                <div class="icon">
                    <i class="am-icon-user-secret"></i>
                </div>
                <div class="input">
                    <input type="text" placeholder="请输入验证码" v-model="code" />
                </div>
                <div class="button">
                    <button class="am-btn" @click="sendCode">获取验证码</button>
                </div>
                <div class="am-cf"></div>
            </div>
            <div class="button">
                <button class="am-btn" @click="submit">注册</button>
            </div>
        </div>
        <div class="am-modal-actions" id="sex-panel">
            <div class="am-modal-actions-group">
                <ul class="am-list">
                    <li class="am-modal-actions-header">请选择性别</li>
                    <li><a href="javascript:" @click="chooseSex('男')">男</a></li>
                    <li><a href="javascript:" @click="chooseSex('女')">女</a></li>
                </ul>
            </div>
            <div class="am-modal-actions-group">
                <button class="am-btn am-btn-secondary am-btn-block" data-am-modal-close>取消</button>
            </div>
        </div>
        <div class="am-modal-actions" id="age-panel">
            <div class="am-modal-actions-group">
                <ul class="am-list">
                    <li class="am-modal-actions-header">请选择年龄段</li>
                    <li><a href="javascript:" @click="chooseAge('20 岁以下')">20 岁以下</a></li>
                    <li><a href="javascript:" @click="chooseAge('21 - 30 岁')">21 - 30 岁</a></li>
                    <li><a href="javascript:" @click="chooseAge('31 - 40 岁')">31 - 40 岁</a></li>
                    <li><a href="javascript:" @click="chooseAge('41 - 50 岁')">41 - 50 岁</a></li>
                    <li><a href="javascript:" @click="chooseAge('51 - 60 岁')">51 - 60 岁</a></li>
                    <li><a href="javascript:" @click="chooseAge('60 岁以上')">60 岁以上</a></li>
                </ul>
            </div>
            <div class="am-modal-actions-group">
                <button class="am-btn am-btn-secondary am-btn-block" data-am-modal-close>取消</button>
            </div>
        </div>
    </div>
    <#include "/res/components/scripts.html" />
    <#include "/res/components/wxConfig.html" />
    <#include "/res/components/http.html" />
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            name: '',
            phone: '',
            sex: '',
            age: '',
            code: ''
        },
        methods: {
            sendCode() {
                var self = this;
                if (self.phone == '') {
                    remind("请先输入手机号");
                    return;
                }
                var url = "/tg/sms";
                var params = {
                    phone: self.phone
                }
                var success = function(data) {
                    message("验证码已发送");
                }
                var fail = function() {}
                request(url, params, success, fail);
            },
            chooseSex(sex) {
                this.sex = sex;
                var $modal = $("#sex-panel");
                $modal.modal("close");
            },
            chooseAge(age) {
                this.age = age;
                var $modal = $("#age-panel");
                $modal.modal("close");
            },
            submit() {
                var self = this;
                if (self.name == '') {
                    remind("请输入名字");
                    return;
                }
                if (self.phone == '') {
                    remind("请输入手机号");
                    return;
                }
                if (self.code == '') {
                    remind("请输入验证码");
                    return;
                }

                var url = "/tg/register";
                var params = {
                    name: self.name,
                    phone: self.phone,
                    sex: self.sex,
                    age: self.age,
                    code: self.code
                }
                var success = function(data) {
                    layer.open({
                        content: "注册成功",
                        btn: "确定",
                        end: function() {
                            window.history.back();
                        }
                    });
                }
                var fail = function() {}
                request(url, params, success, fail);
            }
        }
    })
    wx.ready(function() {
        initWXShare()
    })
    $(document).ready(function() {
        $('.am-modal-actions').on('open.modal.amui', function() {
            $("input").each(function() { $(this).blur(); });
        });
    })
    </script>
</body>

</html>